<template>
  <div>
    <data-card
      v-loading="datacardLoading"
      v-if="
        resourceSet.includes('/web/data-statistic/appUser-statistic/总用户统计')
      "
      :data="dataCard"
      :items="dataCardItems"
      :tips="tips"
      @handleChange="handleDataCardChange"
    />
    <div
      v-loading="dayUserLoading"
      v-if="
        resourceSet.includes(
          '/web/data-statistic/appUser-statistic/日度用户统计'
        )
      "
    >
      <EchartPanel
        :timeUnit="'date'"
        :addressLevel="0"
        :defaultFormItems="['date', 'address']"
        @handleTableData="handleDayUserData"
        :echartsOption="datUserOption"
        title="每日用户统计"
      />
    </div>
    <div
      v-loading="monthUserLoading"
      v-if="
        resourceSet.includes(
          '/web/data-statistic/appUser-statistic/月度用户统计'
        )
      "
    >
      <EchartPanel
        :timeUnit="'month'"
        :addressLevel="0"
        :defaultFormItems="['date', 'address']"
        @handleTableData="handleMonthUserData"
        title="每月用户统计"
        :echartsOption="MonthUserOption"
      />
    </div>
    <div
      v-loading="userChargeLoading"
      v-if="
        resourceSet.includes(
          '/web/data-statistic/appUser-statistic/日度充电订单统计'
        )
      "
    >
      <EchartPanel
        :timeUnit="'date'"
        :addressLevel="0"
        @handleTableData="handleChargeData"
        title="用户24小时充电量趋势"
        :echartsOption="userChargeOptions"
        :rangeButton="false"
        :defaultFormItems="false"
      />
    </div>
  </div>
</template>
<script>
import { selectTotalAppUserStatistic } from '@/api/userStatistics'
import DataCard from './components/DataCard'
import EchartPanel from '@/components/EchartPanel'
import { singleBarOption, bar_lineOption } from './func/options'
import {
  handleDayUserData,
  handleMonthUserData,
  handleChargeData,
} from './func/userQuery'

export default {
  name: 'userStatistics',
  components: { EchartPanel, DataCard },
  computed: {
    resourceSet() {
      return this.$store.getters.resourceSet
    },
  },
  data() {
    return {
      datacardLoading: false,
      dataCard: {
        totalUserCount: 0,
        thirtyUserCount: 0,
        sevenUserCount: 0,
        dailyUserCount: 0,
      },
      dataCardItems: [
        {
          label: '用户总量',
          formatter: (data) => {
            return Number(data.totalUserCount.toFixed(2)).toLocaleString()
          },
        },
        {
          label: '30日活跃用户',
          formatter: (data) => {
            return Number(data.thirtyUserCount.toFixed(2)).toLocaleString()
          },
        },
        {
          label: '7日活跃用户',
          formatter: (data) => {
            return Number(data.sevenUserCount.toFixed(2)).toLocaleString()
          },
        },
        {
          label: '日活跃用户',
          formatter: (data) => {
            return Number(data.dailyUserCount.toFixed(2)).toLocaleString()
          },
        },
      ],
      tips: [
        '数据统计以当前时间往前计算',
        '30日活跃用户：当前时间往前30天内充过电的用户',
        '7日活跃用户：当前时间往前7天内充过电的用户',
        '日活用户：当前时间往前24小时内充过电的用户',
      ],
      dayUserLoading: false,
      datUserOption: bar_lineOption,
      monthUserLoading: false,
      MonthUserOption: bar_lineOption,
      userChargeLoading: false,
      userChargeOptions: singleBarOption,
    }
  },
  mounted() {
    this.datacardLoading = true
    selectTotalAppUserStatistic({
      containSubMch: true,
    })
      .then((res) => {
        this.dataCard = res
      })
      .catch((err) => {
        console.log(err)
      })
      .finally(() => {
        this.datacardLoading = false
      })
  },
  methods: {
    handleDataCardChange(val) {
      this.datacardLoading = true
      selectTotalAppUserStatistic({
        containSubMch: val,
      })
        .then((res) => {
          this.dataCard = res
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.datacardLoading = false
        })
    },
    handleDayUserData(params, instance) {
      this.dayUserLoading = true
      handleDayUserData(params, instance, () => {
        this.dayUserLoading = false
      })
    },
    handleMonthUserData(params, instance) {
      this.monthUserLoading = true
      handleMonthUserData(params, instance, () => {
        this.monthUserLoading = false
      })
    },
    handleChargeData(params, instance) {
      this.userChargeLoading = true
      handleChargeData({}, instance, () => {
        this.userChargeLoading = false
      })
    },
  },
}
</script>
